<template>
    <div :style="{display:multiple?'inline-block':'block'}">
        <template v-if="multiple">
            <span :title="storage.fileName" class="tableFileName" @click="fileClick">{{ storage.fileName}}</span>
        </template>
        <template v-else>
            <div v-if="storage.fileType.indexOf('image') > -1" class="fileOut" :class="{whAuto:wh=='auto'}">
                <img :title="storage.fileName" :src="storage.fileUrl" alt="" @click="fileClick">
            </div>
            <div v-else class="doc" :title="storage.fileName" @click="fileClick">
                {{ storage.fileName }}
            </div>
        </template>
        <el-dialog append-to-body center width="96%" top="2vh" :title="title" :visible.sync="dialogTableVisible">
            <template v-if="dialogTableVisible && storage.fileUrl">
                <div v-if="storage.fileType.indexOf('image') > -1" class="preview_viewer"
                    style="width: 100%;position: relative;height:calc(96vh - 110px);">
                    <div id="viewImages" v-viewer.static="{movable: true,inline: true,navbar:false}" class="images">
                        <img v-show="false" :src="storage.fileUrl" alt="">
                    </div>
                </div>
                <iframe v-else style="height: calc(96vh - 150px);" :src="storage.fileUrl" width="100%" height="100%"
                    frameborder="0" />
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import 'viewerjs/dist/viewer.css'
    import {
        directive as viewer
    } from 'v-viewer'
    export default {
        name: 'FileView',
        directives: {
            viewer: viewer({
                debug: true
            })
        },
        props: {
            multiple: {
                default: false
            },
            file: {
                default: {}
            },
            dataclick: {
                type: Function,
                default: null
            },
            wh: {
                default: null
            },
        },
        data() {
            return {
                title: '文件预览',
                dialogTableVisible: false,
                storage: {}
            }
        },
        watch: {
            file() {
                if (this.file) {

                    this.storage = this.file
                } else {
                    this.storage = {}
                }
            }

        },
        created() {
            if (this.file) {
                console.log(this.file)
                this.storage = this.file
            } else {
                this.storage = {}
            }
        },
        methods: {
            fileClick() {
                if (this.dataclick) {
                    this.dataclick()
                } else {
                    this.viewFile()
                }
            },
            viewFile() {
                if (this.storage.fileType.indexOf("pdf") > -1 || this.storage.fileType.indexOf("image") > -1) {
                    this.title = this.storage.fileName + '预览'
                    this.dialogTableVisible = true
                } else if (this.file) {
                    const a = document.createElement('a')
                    a.href = this.storage.fileUrl
                    a.target = '_blank'
                    document.body.appendChild(a)
                    a.click()
                    document.body.removeChild(a)
                }
            }
        }

    }
</script>

<style scoped>
    .fileOut {
        width: 40px;
        height: 40px;
        position: relative;
    }

    .whAuto.fileOut {
        width: 100%;
        height: 100%;
    }

    .fileOut img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
        border: 1px solid #d9d9d9;
        cursor: pointer;
    }

    .doc {
        width: 100%;
        height: 100%;
        color: #0077f5;
        cursor: pointer;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: bottom;
        direction: rtl;
        unicode-bidi: embed;
    }

    .doc::before {
        content: "汉字";
        font-size: 0;
        vertical-align: middle;
    }

    .fileOut .doc img {
        width: 100%;
        height: 100%;
        border: none;
        object-fit: inherit;
    }

    .tableFileName {
        display: inline-block;
        vertical-align: middle;
        color: #409EFF;
        cursor: pointer;
        margin-right: 5px;
        max-width: 85px;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: bottom;
        direction: rtl;
        unicode-bidi: embed;
        vertical-align: middle;
    }

    .tableFileName:hover {
        color: #F56C6C;
    }

    .tableFileName::before {
        content: "汉字";
        font-size: 0;
        vertical-align: middle;
    }
</style>
